import React, { Component } from 'react'
class Title extends Component {
  static defaultProps = {
    name: '1React'
  }
  render () {
    return (
      <h1>
        <p>{ this.props.children }</p>
        欢迎来到 { this.props.name } 的世界
      </h1>
    )
  }
}

const Content = (props) => {
  return (
    <p>
      { props.name } 核心库只关注于视图层
      <span>{ props.children }</span>
    </p>
  )
}
Content.defaultProps = {
  name: '1react.js'
}
// 自定义组件内部使用时，添加了其余的代码，默认是不会显示的
// 类似于vue中的 slot 可以解决此类问题
// react中无 slot，但是有 props.children
export default class App extends Component {
  render() {
    return (
      <div>
        <Title>11111</Title>
        <Content>222222</Content>
      </div>
    )
  }
}
